import React from 'react';
import { connect } from 'dva';
import { Layout } from 'antd';
// 引入路由 Switch为路由容器
import { Switch, Route, Redirect } from 'dva/router'
import NavBar from './NavBar'
import Home from './Home'
import Menus from './Menus'
import Login from './User/Login'
import Register from './User/Register'
import Admin from './Admin'
import About from './About'
import styles from './IndexPage.scss'

const { Header, Content } = Layout;

function IndexPage(props) {
  console.log(props);
  return (
    <div>
      <Layout className={styles.layout}>
        <Header className={styles.header}>
          {/* 把父组件的props传入子组件,子组件获取当中的location地址并对menu中的 selectedKeys动态赋值达到地址栏与当前的Nav激活一致*/}
          <NavBar {...props}/>
        </Header>
        <Content>
          {/* 一级路由 Switch路由需要用到的容器 */}
          <Switch>
            {/* 路由 Home为顶部引入时命的名*/}
            <Route path="/home" component={(props) => < Home {...props} />} />
            <Route path="/menus" component={(props) => <Menus {...props} />} />
            <Route path="/admin" component={(props) => <Admin {...props} />} />
            <Route path="/about" component={(props) => <About {...props} />} />
            <Route path="/login" component={(props) => <Login {...props} />} />
            <Route path="/register" component={(props) => <Register {...props} />} />
            {/* 重定向 */}
            <Redirect to='/home' />
          </Switch>
        </Content>
      </Layout>
    </div>
  );
}

IndexPage.propTypes = {
};

export default connect()(IndexPage);
